{# Copyright The IETF Trust 2015, All Rights Reserved #}
{% extends "base.html" %}
{% load origin %}
{% load widget_tweaks django_bootstrap5 textfilters ietf_filters %}
{% load person_filters %}
{% block title %}Your account{% endblock %}
{% block content %}
    {% origin %}
    <h1>Your account</h1>
    <form class="form-horizontal" method="post">
        {% csrf_token %}
        {% bootstrap_form_errors person_form %}
        {% for f in new_email_forms %}
            {% bootstrap_form_errors f %}
        {% endfor %}
        <div class="row mb-3">
            <label class="col-sm-2 col-form-label fw-bold">
                User name
            </label>
            <div class="col-sm-10">
                <p class="form-control-plaintext">
                    {{ user.username }}
                </p>
                <a class="btn btn-primary" href="{% url 'ietf.ietfauth.views.change_username' %}">Edit</a>
            </div>
        </div>
        <div class="row mb-3">
            <label class="col-sm-2 col-form-label fw-bold">
                Password
            </label>
            <div class="col-sm-10">
                <a class="btn btn-primary" href="{% url 'ietf.ietfauth.views.change_password' %}">Change password</a>
            </div>
        </div>
        {% if person.photo or person.role_set.exists %}
            <div class="row mb-3">
                <label class="col-sm-2 col-form-label fw-bold">
                    Photo
                </label>
                <div class="col-sm-10">
                    {% if person.photo %}
                    {% include "person/photo.html" with person=person %}
                    {% endif %}
                    {% if person.role_set.exists %}
                    <p>Email <a href="support@ietf.org">support@ietf.org</a>
                    to update your photo.</p></div>
                    {% endif %}
            </div>
        {% endif %}
        <div class="row mb-3">
            <label class="col-sm-2 col-form-label fw-bold">NomCom eligible</label>
            <div class="col-sm-10">
                {% with person|is_nomcom_eligible|yesno:'Yes,No,No' as is_eligible %}
                    <p class="form-control-plaintext {% if is_eligible == 'Yes' %}text-success fw-bold{% else %}text-danger{% endif %}">
                        {{ is_eligible }}
                    </p>
                {% endwith %}
                {% if volunteer_status == 'allow' %}
                    <a id="volunteer-button"
                       class="btn btn-primary"
                       href="{% url "ietf.nomcom.views.volunteer" %}">Volunteer</a>
                {% endif %}
            </div>
        </div>
        <div class="offset-sm-2 alert alert-info my-3">
            {% if volunteer_status == 'volunteered' %}
                <p class="mb-0">
                    <b id="volunteered">You have volunteered for the {{ nomcom.group.name }}.</b> To modify your volunteer status, contact the NomCom chair.
                </p>
            {% else %}
                <p>
                    If you believe this calculation is incorrect, make sure you've added all the
                    email addresses you've registered for IETF meetings with to the
                    list below.
                </p>
                <p>
                    If you've done so and the calculation is still incorrect, please
                    send a note to
                    <a href="mailto:{{ settings.SECRETARIAT_SUPPORT_EMAIL }}">{{ settings.SECRETARIAT_SUPPORT_EMAIL }}</a>.
                </p>
                <p class="mb-0">
                    See
                    <a href="{% url 'ietf.doc.views_doc.document_main' name='rfc8713' %}">RFC 8713</a>
                    for eligibility requirements.
                    For the 2021 and 2022 NomComs, see also
                    <a href="{% url 'ietf.doc.views_doc.document_main' name='rfc9389' %}">RFC 9389</a>.
                </p>
            {% endif %}
        </div>
        <hr>
        <div class="row mb-3">
            <label class="col-sm-2 col-form-label fw-bold">
                Published information
            </label>
            <p class="col-sm-10">
              All of the data below {% if person.photo %}and your photo {% endif %}
              may be openly published in Datatracker, Meetecho and other IT systems.
            </p>
        </div>
        {% bootstrap_form person_form layout="horizontal" exclude="ascii_short" %}
        <div class="row mb-3">
            <label class="col-sm-2 col-form-label fw-bold">
                External resources
            </label>
            <div class="col-sm-10">
                {% if person.personextresource_set.all %}
                    <div class="form-control-plaintext">
                        <dl class="row mb-0">
                            {% for extres in person.personextresource_set.all %}
                                <dt class="col-sm-3">
                                    {% firstof extres.display_name extres.name.name %}
                                </dt>
                                <dd class="col-sm-9">
                                    {{ extres.value|linkify }}
                                </dd>
                            {% endfor %}
                        </dl>
                    </div>
                {% endif %}
                <a class="btn btn-primary"
                   href="{% url 'ietf.ietfauth.views.edit_person_externalresources' %}">Edit</a>
            </div>
        </div>
        <div class="row mb-3">
            <label class="col-sm-2 col-form-label fw-bold">Email addresses</label>
            <p class="col-sm-10">
                You can optionally link more email addresses to your account, 
                which will then ensure that all I-Ds you have published using 
                different email addresses are all shown against your account.
            </p>
        </div>
        <div class="row mb-3">
            <div class="col-sm-2"></div>
            <div class="col-sm-10 emails">
                <table class="table table-sm">
                    <thead>
                        <tr>
                            <th scope="col" class="text-center">Primary</th>
                            <th scope="col" class="text-center">Active</th>
                            <th scope="col">Address</th>
                            <th scope="col">Origin</th>
                        </tr>
                    </thead>
                    <tbody>
                    <!-- [html-validate-disable-block input-missing-label -- labelled via aria-label] -->
                    {% for email in emails %}
                        <tr>
                            <td class="text-center">
                                <input class="form-check-input"
                                       type="radio"
                                       name="primary_email"
                                       aria-label="Primary email"
                                       value="{{ email.pk }}"
                                       {% if email.primary %}checked{% endif %}>
                            </td>
                            <td class="text-center">
                                <input class="form-check-input"
                                       type="checkbox"
                                       name="active_emails"
                                       value="{{ email.pk }}"
                                       aria-label="Active email"
                                       {% if email.active %}checked{% endif %}>
                            </td>
                            <td>
                                {{ email|linkify }}
                            </td>
                            <td>{{ email.origin|default:'(unknown)'|urlize_ietf_docs }}</td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
                <p class="form-text">
                    Note: Email addresses cannot be deleted in this form, only deactivated.
                </p>
                {% for f in new_email_forms %}
                    {% bootstrap_field f.new_email layout="horizontal" show_label=False %}
                {% endfor %}
                <div class="new-emails"></div>
                <div>
                    <button type="button" class="btn btn-primary add-email mt-3 mb-5">Add another email address</button>
                </div>
                {% for role in roles %}
                    {% bootstrap_field role.email_form.email  show_label=False %}
                {% endfor %}
            </div>
        </div>
        {% bootstrap_button button_type="submit" content="Apply changes" extra_classes="offset-sm-2" %}
    </form>
    <div class="form-text mt-5">
        <p>
            All the information the datatracker has that is coupled to this account and visible
            on this page or otherwise related to your work on ietf documents, is also available
            to you as a
            <a href="{% url 'ietf.api.views.PersonalInformationExportView' %}">JSON blob</a>
            when
            you are logged in.
        </p>
    </div>
{% endblock %}
{% block js %}
    <script>
        $(document)
            .ready(function () {
            $("input[name=active_emails]")
                .on("change keypress click", function () {
                if (this.checked) {
                    $(this)
                        .parent()
                        .next()
                        .addClass("text-success");;
                    $(this)
                        .parent()
                        .next()
                        .removeClass("text-danger line-through");
                } else {
                    $(this)
                        .parent()
                        .next()
                        .addClass("text-danger line-through");
                    $(this)
                        .parent()
                        .next()
                        .removeClass("text-success");
                }
            })
                .trigger("change");

            $(".add-email")
                .on("click", function (e) {
                e.preventDefault();

                var container = $(this)
                    .closest("form")
                    .find(".new-emails");

                $('<input class="form-control mb-1" name="new_email" placeholder="You will get a confirmation challenge. To add an address that cannot be confirmed this way, contact the secretariat.">')
                    .appendTo(container)
                    .trigger("focus");
                $('<div class="float-end text-body-secondary small mb-3">Remember to submit the form for the new email challenge to be sent.</div>')
                    .appendTo(container);
            })
        });

    </script>
{% endblock %}